<template>
  <div class="about">
    <div class="about-box-outside" style="font-weight:bold;font-size:16px">
      <h1>关于我</h1>
      <!--
      头像
      生日 
      所在地
      社交帐号
      照片墙
      格言
      自己的一段话
     -->
      <div class="avatar-box">
        <h2 class="label">头像</h2>
        <div class="avatar-border">
          <img src="../assets/images/avatar.jpg" class="avatar" />
        </div>
      </div>
      <div class="nicky-name-box">
        <h2 class="label" style="border-color:pink;background-color:pink;">
          昵称
        </h2>
        {{ nickyName }}
      </div>
      <div class="birthday-box">
        <h2 class="label" style="border-color:plum;background-color:plum;">
          生日
        </h2>
        {{ birthday }}
      </div>
      <div class="location-box">
        <h2
          class="label"
          style="border-color:lightgreen;background-color:lightgreen;"
        >
          地址
        </h2>
        {{ location }}
      </div>
      <div class="motto-box">
        <h2 class="label" style="border-color:khaki;background-color:khaki;">
          座右铭
        </h2>
        <div>{{ motto }}</div>
      </div>
      <div class="words-box">
        <h2 class="label" style="border-color:plum;background-color:plum;">
          寄语
        </h2>
        <div style="display:inline-block;">{{ words }}</div>
      </div>
      <div class="media-box">
        <h2 class="label">
          社交媒体账号
        </h2>
        <div class="media">
          <img src="../assets/media-images/github.png" />
          <a :href="socialAccounts.github" target="_blank">Sammmmmmmy</a>
        </div>
        <div class="media">
          <img src="../assets/media-images/QQ.png" />
          <p>{{ socialAccounts.QQ }}</p>
        </div>
        <div class="media">
          <img src="../assets/media-images/wechat.png" />
          <p>{{ socialAccounts.wechat }}</p>
        </div>
        <div class="media" style="margin-left:250px">
          <img src="../assets/media-images/bilibili.png" />
          <a :href="socialAccounts.bilibili" target="_blank">Sam__my</a>
        </div>
        <div class="media">
          <img src="../assets/media-images/weibo.png" />
          <a :href="socialAccounts.weibo" target="_blank">Samplk</a>
        </div>
      </div>
      <div class="photos-box">
        <h2
          class="label"
          style="border-color:pink;background-color:pink;"
        >
          照片墙
        </h2>
        <div style="text-align:center;padding-left:20px;padding-right:20px">
          <el-carousel :interval="4000" type="card" height="200px">
            <el-carousel-item v-for="item in photos" :key="item">
              <img class="photo" :src="item"/>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.about-box-outside {
  width: 1050px;
  min-height: 800px;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.8);
}

.label {
  border-color: #97dffd;
  -webkit-box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
    0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 1px 5px 0 rgba(0, 0, 0, 0.12);
  background-color: #97dffd;
  margin: 5px 0 15px 2px;
  font-size: 14px;
  position: relative;
  left: -32px;
  border-radius: 0 4px 4px 0;
  padding: 7px 11.2px 7px 32px;
  display: inline-block;
  color: #fff;
}

.avatar-box,
.nicky-name-box,
.birthday-box,
.location-box,
.media-box,
.motto-box,
.words-box,
.photos-box {
  padding: 10px;
  margin: 15px;
  background: white;
  border-radius: 10px;
  transition: all 0.2s linear;
  position: relative;
  background: #fff;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
  text-align: left;
}

.avatar-border {
  margin: 0px auto;
  margin-bottom: 35px;
  padding-top: 10px;
  width: 170px;
  height: 170px;
  border-radius: 170px;
  background: lightslategray;
}

.avatar {
  display: block;
  margin: 0px auto;
  width: 150px;
  height: 150px;
  border-radius: 150px;
  border: 2px;
}

.media {
  text-align: center;
  margin: 10px;
  width: 200px;
  display: inline-block;
}

.media img {
  margin: 0 auto;
  display: block;
}

.media a {
  margin: 0 auto;
  display: block;
}

.media p {
  margin: 0 auto;
  display: block;
}

.el-carousel__item{
  border-radius: 5px;
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

.photo{
  max-width: 340px;
  max-height: 200px;
  vertical-align: middle;
}
</style>

<script>
export default {
  data() {
    return {
      avatar: require("../assets/images/background.jpg"),
      nickyName: "",
      birthday: "",
      location: "",
      socialAccounts: {
        weibo:
          "https://weibo.com/u/6862208924?topnav=1&wvr=6&topsug=1&is_all=1",
        bilibili: "https://space.bilibili.com/382609798",
        QQ: "2472076590",
        wechat: "Sammmmmmmy1025",
        github: "https://github.com/Sammmmmmmy"
      },
      motto: "",
      words:
        "",
      photos:[
        require("../assets/images/troye.jpg"),
        require("../assets/images/background.jpg"),
        require("../assets/images/avatar.jpg")
      ]
    };
  },
  created:function(){
    var that=this;
    var qs=this.$qs;
    this.$http({
        url: "servlet/info",
        method: "post",
        transformRequest: [
          function(data) {//在请求之前对data传参进行格式转换
            data = qs.stringify(data);
            return data;
          }
        ],
        data: {
          funcType:0//0:grtINfo;1:changeInfo;2:likes
        },
        headers: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8"
        }
      }).then(
        function(res) {
          that.nickyName=res.data.nickyName;
          that.birthday=res.data.birthday;
          that.location=res.data.location;
          that.motto=res.data.motto;
          that.words=res.data.words;
        },
        function(res) {
          console.log(res);
          console.log("about-getInfo出错");
        }
      );
  }
};
</script>
